.ngx-pagination {
  margin: 0 0.4375rem;
  padding: 0;
  margin-top: 0.4375rem;

  &::before,
  &::after {
    content: ' ';
    display: table;
  }

  &::after {
    clear: both;
  }

  li {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    margin-right: 0.0625rem;
    border-radius: 0;
    display: inline-block;
  }

  a,
  button {
    color: $f-text-02;
    display: block;
    padding: 0.25rem;
    border-radius: 0.125rem;
    cursor: pointer;

    &:hover {
      background: $f-theme-05;
      color: $f-text-00;
    }
  }

  .current {
    cursor: default;

    span.page-link {
      background: $f-theme-06;
      color: $f-text-00;
      border-color: $f-theme-05;
    }
  }

  .f-icon {
    vertical-align: baseline;
  }

  .disabled {
    color: $f-neutral-09;
    cursor: default;

    &:hover {
      background: transparent;
    }
  }

  .pagination-previous {

    a,
    &.disabled {
      &::before {
        display: inline-block;
        margin-right: 0.5rem;
      }
    }
  }

  .pagination-next {

    a,
    &.disabled {
      &::after {
        display: inline-block;
        margin-right: 0.5rem;
      }
    }
  }

  .show-for-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .small-screen {
    display: none;
  }
}



@media screen and (max-width: 601px) {
  .ngx-pagination.responsive .small-screen {
    display: inline-block;
  }

  .ngx-pagination.responsive li:not(.small-screen):not(.pagination-previous):not(.pagination-next) {
    display: none;
  }
}